<template>
    <div class="container">
        <header class="center_header">
            <ul class="flex">
                <li>
                    <div class="fl">
                        <a class="fl back_icon" href="#"></a>
                        <span class="fl" v-text="back"></span>
                    </div>
                    <span class="fl close" v-text="close"></span>
                </li>
                <li>
                    <h1 v-text="title"></h1>
                </li>
                <li>
                </li>
            </ul>
        </header>
        <div id="body">
            <div class="prodetail-head">
                <img  class="prodetail-head-ad" :src="productDetail.productLogo" alt=""><!-- ./images/product_detail_img.png -->
                <p class="text">{{productDetail.insurerName}} | 销量{{productDetail.totalAmount}}</p>
            </div>
            <div class="prodetail-title">
                <h2 class="big">{{productDetail.productName}}</h2>
                <ul class="tips-list">
                    <li>投保人群广，{{minAge}} - {{maxAge}}岁均可投保</li>
                    <li>{{productDetail.perferWords}}<!-- 意外医疗，加量不加价 --></li>
                </ul>
                <a class="green">查看更多特色</a>
            </div>
            <div class="safe-title" v-if="planListLen === 1">
                <i class="iconfont">&#xe616;</i>
                保障清单  
            </div>
            <ul class="safe-type" v-else-if="planListLen === 2">
                <li class="safe-titem"
                    v-for="pitem in productDetail.planList"
                    @click="typeShow($index)"
                    v-bind:class="{ cur:$index===i}"
                >
                    <p class="empty"></p>
                    <p class="tgreen">
                        <span class="big" v-if="pitem.productPremium">{{pitem.planPrice/100}}</span>￥ 起
                    </p>
                    <p class="gray">{{pitem.planName}}</p>
                </li>
            </ul>
            <ul class="safe-type" v-else-if="planListLen === 3">
                <li class="safe-titem"
                    v-for="(pitem,index) in productDetail.planList"
                    @click="typeShow(index)"
                    v-bind:class="{ cur:index===i}"
                >
                    <p class="empty"></p>
                    <p class="tgreen">
                        <span class="big" v-if="pitem.productPremium">
                            {{pitem.productPremium/100}}</span>￥ 起
                    </p>
                    <p class="gray">{{pitem.planName}}</p>
                </li>
            </ul>
            <div class="safe-detail">
                <p class="detail" v-for="item in benefitList">
                    {{item.benefitName}}
                    <span class="fr"> {{item.insuredAmount | ttoyuan}}元</span>
                </p>
                <a class="green">查看保单详情</a>
            </div>
            <ul class="safe-list">
                <li class="safe-item">
                    保障时间
                    <div class="item-fr">
                        <select class="select" name="" dir="rtl" @change="timeSelect($event)">
                            <option v-for="titem in guaranteePeriod" :value="titem[0]">
                                {{titem[0]}}
                            </option>
                        </select>
                    </div>
                </li>
                <li class="safe-item">
                    被保人性别
                    <div class="item-fr">
                        <select class="select" name="" dir="rtl" id="sex">
                            <option value="1" v-if="productDetail.genderLimit === '0' || productDetail.genderLimit === '1'">男</option>
                            <option value="2" v-if="productDetail.genderLimit === '0' || productDetail.genderLimit === '2'">女</option>
                        </select>
                    </div>
                </li>
                <li class="safe-item">
                    出生日期
                    <div class="item-fr">
                        <input type="text" class="input" placeholder="请选择">
                    </div>
                </li>
                <li class="safe-item">
                    购买份数
                    <div class="buynum">
                        <span class="buynum-button" @click="reduceFun">
                            <i class="iconfont">&#xe627;</i>
                        </span>
                        <span class="buynum-input">
                            <input type="text" class="input" @blur="numberBulr" v-model="number">
                        </span>
                        <span class="buynum-button buynum-add" @click="addFun">
                            <i class="iconfont">&#xe836;</i>
                        </span>
                    </div>
                </li>
            </ul>
            <div class="item-title">
                投保人信息
            </div>
            <ul class="safe-list">
                <li class="safe-item">
                    <span class="safe-item-left">
                        投保人
                    </span>
                    <input type="text" class="safe-item-input" placeholder="请输入投保人姓名">
                </li>
                <li class="safe-item">
                    <span class="safe-item-left">
                        证件类型
                    </span>
                    <select class="safe-item-select" name="" id="idType">
                        <option value="0">身份证</option>
                        <option value="1">护照</option>
                        <option value="0">军官证</option>
                    </select>
                    <label class="fr" for="idType"></label>
                </li>
                <li class="safe-item">
                    <span class="safe-item-left">
                        证件号码
                    </span>
                    <input type="text" class="safe-item-input" placeholder="请输入证件号码">
                </li>
                <li class="safe-item">
                    <span class="safe-item-left">
                        手机号码
                    </span>
                    <input type="text" class="safe-item-input" placeholder="请输入手机号码" maxlength="11">
                </li>
            </ul>
            <div class="item-title">
                被保人信息
            </div>
            <ul class="safe-list">
                <li class="safe-item">
                    <span class="safe-item-left">
                        与投保人关系
                    </span>
                    <select class="safe-item-select" name="" id="idType">
                        <option value="0">本人</option>
                        <option value="1">配偶</option>
                        <option value="0">子女</option>
                        <option value="0">父母</option>
                    </select>
                    <label class="fr" for="idType"></label>
                </li>
                <li class="safe-item">
                    <span class="safe-item-left">
                        被保人
                    </span>
                    <input type="text" class="safe-item-input" placeholder="请输入被保人姓名">
                </li>
                <li class="safe-item">
                    <span class="safe-item-left">
                        证件类型
                    </span>
                    <select class="safe-item-select" name="" id="beiidType">
                        <option value="0">身份证</option>
                        <option value="1">护照</option>
                        <option value="0">军官证</option>
                    </select>
                    <label class="fr" for="beiidType"></label>
                </li>
                <li class="safe-item">
                    <span class="safe-item-left">
                        证件号码
                    </span>
                    <input type="text" class="safe-item-input" placeholder="请输入证件号码">
                </li>
            </ul>
            <div class="item-title">
                <i class="iconfont">&#xe61c;</i>
                保险受益人为法定受益人
            </div>
            <ul class="info-list">
                <li class="info-item">
                    理赔流程<span class="fr"><i class="iconfont">&#xe61d;</i></span>
                </li>
            </ul>
            <div class="info-tips">
                <img class="info-check" @click="checkFun" v-if="!check" src="../../assets/images/weigouxuan.png" alt="">
                <img class="info-check" @click="checkFun" v-else src="../../assets/images/gouxuan.png" alt="">
                我已阅读<span class="green">《投保须知》</span><span class="green">《保险条款》</span><span class="green">《健康告知》</span>，并同意上述协议约定
            </div>
            <div class="footer">
                <div class="price">
                    ￥{{totalPrice/100 * number}}.00
                </div>
                <a href="tel:0000000" class="ask">
                    <i class="iconfont">&#xe61e;</i>
                    咨询
                </a>
                <div class="button">
                    我要投保
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import Common from 'js/Common'
import md5 from 'md5'
export default {
    data () {
        return {
            title: '产品详情',
            back: '返回',
            close: '关闭',
            productId: '1050',
            guaranteePeriod: [], // 产品期限
            minAge: '', // 最小承保年龄
            maxAge: '', // 最大承保年龄
            benefitList: '', // 保障利益分类
            priceList: '', // 报价列表
            number: 1,
            i: 0,
            check: true, // 是否已阅读
            planListLen: '',
            totalPrice: 0, // 总共的价格
            productDetail: [] // 产品详情
        }
    },
    created () {
        this.prodetailFun();
    },
    mounted () {
    },
    watch: {
    },
    methods: {
        checkFun () {
            this.check = !this.check;
        },
        prodetailFun () {
            var that = this;
            var osign = md5('{"productId":that.productId}md5_key');
            this.$nextTick(function () {
                axios.post('http://192.168.32.95:8080/api/api.do', {
                    'input': {
                        'productId': that.productId
                    },
                    'sign': osign,
                    'method': 'getProductDetail'
                }, {
                    headers: {
                        height: 2392,
                        width: 1440,
                        osName: 'A',
                        clientVersion: '1.0.0',
                        clientType: 10,
                        versionType: 2,
                        deviceNo: 'FBE018F2-DBA7-4CB9-8DB2-2ED01D13046B',
                        deviceName: 10,
                        'Content-Type': 'application/json',
                        sessionId: 'ef41c937419168e481dfd9d28aff7c80',
                        domainId: '100'
                    }
                })
                .then(function (response) {
                    if (response.data.respCode === '000000') {
                        that.productDetail = response.data.output;
                        that.guaranteePeriod = that.stringTojson1(that.productDetail.guaranteePeriod);
                        that.priceList = that.productDetail.priceList;
                        that.minAge = that.stringTojson2(that.productDetail.minAge);
                        that.maxAge = that.stringTojson2(that.productDetail.maxAge);
                        that.benefitList = that.productDetail.planList[0].classNameList[0].benefitList;
                        console.log(that.productDetail.priceList[0].productPremium);
                        if (that.productDetail.planList.length === 1) {
                            that.planListLen = 1;
                        } else if (that.productDetail.planList.length === 2) {
                            that.planListLen = 2;
                        } else {
                            that.planListLen = 3;
                        }
                    } else {
                        console.log(response.data.respMsg);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            })
        },
        addFun () {
            if (this.productDetail.maxInsurant <= this.number) {
                this.number = this.productDetail.maxInsurant;
            } else {
                this.number ++;
            }
        },
        reduceFun () {
            if (this.number < 2) {
                this.number = 1;
            } else {
                this.number --;
            }
        },
        numberBulr () {
            if (this.number < 2) {
                this.number = 1;
            }
            if (this.productDetail.maxInsurant <= this.number) {
                this.number = this.productDetail.maxInsurant;
            }
        },
        typeShow (index) {
            this.i = index;
            this.benefitList = this.productDetail.planList[index].classNameList[0].benefitList;
        },
        timeSelect (e) {
            var that = this;
            var _this = e.target.value;
            console.log(_this);
            var len = that.priceList.length;
            for (var i = 0; i < len; i++) {
                var timeKey = that.priceList[i].priceKeyword.split(';')[2];
                if (_this === timeKey) {
                    that.totalPrice = that.priceList[i].productPremium;
                }
            }
        },
        stringTojson1 (data) {
            var odata = data.split(';');
            var allDate = [];
            for (var i = 0; i < odata.length; i++) {
                var oneDate = odata[i].split('_');
                allDate.push(oneDate);
            }
            return allDate;
        },
        stringTojson2 (data) { // 例”30_4“表示30周岁
            var odata = data.split('_');
            var num = odata[0];
            var unit = (odata[1].split(';'))[0];
            if (unit === '1') {
                return num + '天';
            } else if (unit === '2') {
                return num + '周';
            } else if (unit === '3') {
                return num + '月';
            } else if (unit === '4') {
                return num + '周岁';
            }
        }
    },
    filters: {
        ttoyuan: function (value) {
            var RMB = null;
            if (!value) {
                RMB = 0;
            } else {
                value = value.split(',').join('');
                if (value < 100000) {
                    RMB = value;
                } else {
                    RMB = parseInt(value) / 10000 + '万'
                }
            }
            return RMB;
        }
    }
}
</script>
